<template>
  <div>
    <el-row >
      <el-col span="6" v-for="p in tableData">
        <el-card style="margin: 10px 10px; background-color: rgba(255,255,255,0.3);">
          <img src="../assets/imgs/car.webp"width="100%" height="100%">
          <p style="font-size: 12px">
            <psan>车位区域:{{p.location}}</psan>
            <br>
            <span style="font-size: 12px">车位号:{{p.locationNumber}}号</span>
          </p>
          <el-button @click="push(p.locationNumber)" style="background-color: #0096dc">点击查看</el-button>
        </el-card>
      </el-col>
    </el-row>
    <el-pagination @size-change="sizeChange" @current-change="currentChange"
                   :current-page="page" :page-size="size" :page-sizes="pageSizes"
                   layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>


  </div>
</template>
<style>
body{
  background-image: url("../assets/imgs/background.jpg");
}
</style>
<script>
export default {
  data() {
    return {
      tableData: [],
      remainder:'',
      page: 1, //第几页
      size: 12, //一页多少条
      total: 0, //总条目数
      allData:[],
      pageSizes: [12,24,36], //可选择的一页多少条

    };
  },


  methods: {



    //获取表格数据，自行分页（splice）
    getTabelData2() {
      let data=JSON.parse(JSON.stringify(this.allData))
      this.tableData = data.splice(
          (this.page - 1) * this.size,
          this.size
      );
      this.total=this.allData.length
    },
    //page改变时的回调函数，参数为当前页码
    currentChange(val) {
      console.log("翻页，当前为第几页", val);
      this.page = val;
      this.getTabelData2();
    },
    //size改变时回调的函数，参数为当前的size
    sizeChange(val) {
      console.log("改变每页多少条，当前一页多少条数据", val);
      this.size = val;
      this.page = 1;
      this.getTabelData2();
    },

    //请求车位列表
    loadParkingSpaceList() {
      let url = 'http://localhost:8080/ParkingSpace/getFreeSpaceList'
      this.axios.get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.code == 200) {
          this.allData = responseBody.data;
          this.tableData = this.allData.slice(
              (this.page - 1) * this.size,
              this.page * this.size
          );
          this.total=this.allData.length
        }else {
          this.$message({
            showClose: true,
            message: responseBody.message,
            type: 'error'
          });
        }
      });
    },
    push(locationNumber){
      localStorage.setItem('locationNumber',locationNumber);
      this.$router.push('/carInfo');
    }

  }
  ,
  created() {
    this.loadParkingSpaceList()

  }
}
</script>
